revision:
The <ol> tag defines an ordered list, which can be numerical or alphabetical. The <li> tag is used to define each list item. Use CSS to style lists. For unordered list, use the <ul> tag. It's good practice to use "ol" where the steps in the list must be carried out in sequence.
reversed ; value: reversed;
specifies that the list order should be reversed (9,8,7...). This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.
start ; value: number;
specifies the start value of an ordered list. An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".
type ; value: 1, A, a, I, i;
specifies the kind of mark. Sets the numbering type: "a" for lowercase letters, "A" for uppercase letters, "i" for lowercase Roman numerals, "I" for uppercase Roman numerals, #1# for numbers (default). The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.
<ol> . . . </ol>
Codes:
<ol style="margin-left:4vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol style="margin-left:4vw;" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Codes:
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
<div>
<ol style="margin-left:4vw;" class="a">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="b">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="c">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="d">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="e">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="f">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="g">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="h">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="i">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="j">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="k">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="l">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="m">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="n">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola </li>
</ol>
<ol style="margin-left:4vw;" class="o">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="p">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola </li>
</ol>
<ol style="margin-left:4vw;" class="q">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="r">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="s">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>